<script setup lang='ts'>
import { reactive, ref, watch } from 'vue';
type IPerson = { name: string, info: { address: string, phone: string } }
const person = reactive<IPerson>({
    name: "张三",
    info: {
        address: "北京昌平",
        phone: "010-12345678"
    }
})
// Watch监听响应式对象中属性的变化
watch(() => person.name, (newValue, oldValue) => {
    console.log("新值" + newValue, "旧值" + oldValue)
})
</script>
<template>
    <h1>Watch监听属性的变化</h1>
    <ul>
        <li v-for="(value, key, index) in person" :key="index">
            {{ value }}
        </li>
    </ul>
    <button @click="person.name = '李四'">修改名字</button>
    <button @click="person.info = { address: '123', phone: 'scd' }">修改信息</button>
</template>

<style scoped></style>